<template>
  <div>
    <div class="bar">
      <div class="container">
        <span @click="search0" :class="{ active: now === 0 }">全部</span>
        <span @click="search1" :class="{ active: now === 1 }">商家</span>
        <span @click="search2" :class="{ active: now === 2 }">套餐</span>
      </div>
    </div>
    <div class="result_container">
      <div class="result_left">
        <router-view></router-view>
      </div>
      <div class="container_right">
        <h2>同类热卖</h2>
        <hot-sell-cell
          v-for="item in ranList"
          :key="item.pid"
          :item="item"
        ></hot-sell-cell>
      </div>
    </div>
  </div>
</template>

<script>
import HotSellCell from "@/components/HotSellCell.vue"
export default {
  components: { HotSellCell },
  data() {
    return {
      now: 0,
      ranList: null,
    }
  },
  methods: {
    search0() {
      this.now = 0
      const path = "/search/search_all?kw=" + this.$route.query.kw
      const pathEncode =
        "/search/search_all?kw=" + encodeURI(this.$route.query.kw)
      // console.log(decodeURI(this.$route.fullPath.split("=")[1]))
      // console.log(encodeURI(this.kw))
      if (this.$route.fullPath === pathEncode) return
      this.$router.push(path)
    },
    search1() {
      this.now = 1
      const path = "/search/search_com?kw=" + this.$route.query.kw
      const pathEncode =
        "/search/search_com?kw=" + encodeURI(this.$route.query.kw)
      // console.log(decodeURI(this.$route.fullPath.split("=")[1]))
      // console.log(encodeURI(this.kw))
      if (this.$route.fullPath === pathEncode) return
      this.$router.push(path)
    },
    search2() {
      this.now = 2
      const path = "/search/search_pro?kw=" + this.$route.query.kw
      const pathEncode =
        "/search/search_pro?kw=" + encodeURI(this.$route.query.kw)
      // console.log(decodeURI(this.$route.fullPath.split("=")[1]))
      // console.log(encodeURI(this.kw))
      if (this.$route.fullPath === pathEncode) return
      this.$router.push(path)
    },
    getRanData() {
      const url = "/companys/productsRandom?n=10"
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.ranList = res.data.data
      })
    },
  },
  mounted() {
    this.getRanData()
  },
  watch: {
    $route(to, from) {
      //   console.log(to.path)
      if (to.path.split("/")[2] === "search_all") {
        this.now = 0
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.bar {
  border-top: 1px solid #e8e8e8;
  height: 60px;
  box-shadow: 0 5px 10px -5px #e8e8e8;
  .container {
    height: 100%;
    width: 1200px;
    margin: 10px auto;
    > span {
      display: inline-block;
      height: 100%;
      padding-top: 9px;
      margin-right: 60px;
      cursor: pointer;
      &:hover {
        color: #e4464b;
      }
      &.active {
        color: #e4464b;
      }
    }
  }
}

.result_container {
  width: 1200px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  .result_left {
    width: 68%;
  }
  .container_right {
    width: 25%;
    > h2 {
      margin-bottom: 20px;
    }
  }
}
</style>
